<template>
  <n-card content-style="padding: 6px 16px;">
    <n-list>
      <n-list-item>
        <template #prefix>
          <img src="@/assets/images/avatar.png" alt="头像" width="34">
        </template>
        <template #suffix>
          <n-button strong secondary size="small" @click="handleLogoutBtn">退出登录</n-button>
        </template>
        <n-thing title="微信昵称123" description="yan1915766026"></n-thing>
      </n-list-item>

      <n-list-item>
        <n-thing title="自动登录">
          <div class="my-desc">开启后，在本机登录微信将无需手机确认。</div>
          <div class="my-desc">暂仅支持在手机上开启此功呢。</div>
        </n-thing>
        <template #suffix>
          <n-switch v-model:value="form.autoLogin" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="仅保留聊天记录" />
        <template #suffix>
          <n-switch v-model:value="form.onlyKeepChat" size="small" />
        </template>
      </n-list-item>
    </n-list>
  </n-card>

  <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
    <n-list>
      <n-list-item>
        <n-thing title="存储空间" />
        <template #suffix>
          <n-button strong secondary size="small" @click="handleManager">管理</n-button>
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="存储位置">
          <div class="my-desc" style="color: #697ba0;">{{ form.savePath }}</div>
        </n-thing>
        <template #suffix>
          <n-button strong secondary size="small" @click="handleChangeSavePath">更改</n-button>
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing>
          <div style="display: inline-flex;">
            自动下载小于
            <n-input-number
              v-model:value="form.downloadSize"
              :clearable="false"
              placeholder=""
              :show-button="false"
              size="tiny"
              style="width: 34px;margin: 0 4px;"
            />
            MB的文件
          </div>
        </n-thing>
        <template #suffix>
          <n-switch v-model:value="form.autoDownload" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="" />
        <template #suffix>
          <n-button strong secondary size="small" @click="clearAllChatLogs">清空全部聊天记录</n-button>
        </template>
      </n-list-item>
    </n-list>
  </n-card>
</template>

<script setup>
import { ref, h } from "vue";

// tauri api
import { ask, confirm, message, open } from '@tauri-apps/plugin-dialog';
import { invoke } from "@tauri-apps/api/core";

import { notificationService } from "@/utils/notification.js";

// 提示与弹框
import { useDialog, useMessage } from "naive-ui";
const nMessage = useMessage();
const dialog = useDialog();

// 窗口
import { useWindow } from "@/hooks/useWindow.js";
const { createWindow } = useWindow();

// 托盘
import { useTray } from "@/hooks/useTray.js";
const { destroyTrayIcon } = useTray();

const form = ref({
  autoLogin: false,
  onlyKeepChat: true,
  autoDownload: true,
  downloadSize: 20,
  savePath: 'E:/weixin/storage'
});

// 退出登录按钮点击确认提示
const handleLogoutBtn = async () => {
  dialog.success({
    title: "提示",
    content: () => h('div', null, [
      '退出登录后将无法接收到消息，',
      h('br'),
      '确定要退出登录？'
    ]),
    positiveText: "确定",
    negativeText: "取消",
    maskClosable: false,
    onPositiveClick: async () => {
      nMessage.success('退出成功')
      // 1. 设置登录状态为false
      await invoke('set_login_status', { status: false });

      // 2. 销毁托盘，等创建之后再销毁托盘图标，因为
      await destroyTrayIcon();

      // 3. 创建新的登录窗口
      await createWindow('login', {
        label: 'login',
        title: '登录',
        width: 500,
        height: 380,
        decorations: false,
        transparent: false,
        resizable: false,
        center: true,
        focus: true
      });

      // 4. 销毁其他所有窗口除了【tray/free/login】窗口，
      // 放到最后，否则当前窗口被销毁了，后续的方法会中断导致不执行
      await invoke('destroy_all_windows_except_tray');
    },
    onNegativeClick: () => {
      nMessage.error('您点击了取消按钮')
    }
  });
}

// 管理
const handleManager = () => {
  message('管理个毛线，我还没写这个功能呢！', {
    title: '提示',
    kind: 'warning'
  });
}

// 更改存储位置
const handleChangeSavePath = async () => {
  const path = await open({
    directory: true,
    multiple: false,
    title: '选择存储位置'
  });
  if (path) {
    form.value.savePath = path;
  }
}

// 清空全部聊天记录
const clearAllChatLogs = async () => {
  const confirmResult = await confirm('被清空的聊天记录将无法恢复，\n请再次确认是否清空所有个人和群的聊天记录。', {
    title: '清空全部聊天记录',
    kind: 'warning',
    okLabel: '清空全部',
    cancelLabel: '取消'
  });
  console.log('confirmResult', confirmResult)
  if(confirmResult) {
    await notificationService.send({
      title: '提示',
      body: '操作成功'
    });
  }
}
</script>

<style lang="scss" scoped>
@use "@/assets/css/n-list-reset.scss";
</style>
